<template>
  <Modal v-model="visibel" :title="`${title}`" @on-ok="ok" @on-cancel="cancel">
    <Form :model="editForm" :label-width="120" :rules="ruleValidate" ref="formValidate">
      <Form-item label="字典名称" prop="dictName">
        <Input type="text" v-model="editForm.dictName" placeholder="请输入字典名称" clearable style="width: 200px" />
      </Form-item>
      <Form-item label="类型值" prop="dictType">
        <Input type="text" v-model="editForm.dictType" placeholder="请输入类型值" clearable style="width: 200px" />
      </Form-item>
    </Form>
    <div slot="footer">
      <Button @click="ok" type="primary" :loading="loading">确认</Button>
      <Button @click="cancel" >取消</Button>
    </div>
  </Modal>
</template>

<script>
import { getDictByKey } from "@/libs/dictStorage";
const gradeDictData = getDictByKey("memberGrade");
import { editDictType } from '@/api/dict.js'

export default {
  data() {
    return {
      title: '',
      visibel: false,
      loading: false,
      editForm: {},
      gradeArrays: gradeDictData,
      ruleValidate: {
        dictName: [{ required: true, message: "请输入字典名称!", trigger: "blur" }],
        dictType: [{ required: true, message: "请输入类型值!", trigger: "blur" }],
      },
    };
  },
  methods: {
    add(record = {}) {
      this.title = '新增';
      this.editForm = { ...record };
      this.visibel = true;
    },
    edit(record) {
      this.title = '编辑';
      this.editForm = { ...record };
      this.visibel = true;
    },
    cancel() {
      this.visibel = false;
      this.loading = false
      this.$refs.formValidate.resetFields()
    },
    ok() {
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          this.loading = true
          editDictType(this.editForm).then((res) => {
            if (res.success) {
              this.$Message.success("修改成功！");
              this.$emit("success");
              this.cancel()
            } else {
            }
          }).finally(()=>{
            this.loading = false
          });
        } else {
        }
      });
    },
  },
};
</script>

<style></style>
